<template>
  <div >

    <el-row style="margin:0px;padding:0px;background-color:rgb(4,21,39);">

      <el-menu

        background-color="rgb(4,21,39)"
        text-color="white"
        active-text-color="#409EFF"
        style="margin:0px;padding:0px;border:0px solid black;"
        unique-opened

        @open="handleOpen"
        router
        @close="handleClose">
        <el-submenu  style="padding-left: 0px;"  v-for="menu1 in menus" :index="menu1.id+''"  :key="''+menu1.id">
          <template slot="title" style="padding-left: 0px;">

            <span style="float:left;padding-left: 0px;">{{menu1.name}}</span>
          </template>


          <div style="padding-left: 0px;"  v-for="menu2 in menu1.children"  :key="menu2.id+''">
            <div v-if="menu2.children" >
              <el-submenu :index="menu2.id+''" >
                <template slot="title">
                  <span style="float:left;">{{menu2.name}}</span>
                </template>
                <el-menu-item

                  v-for="menu3 in menu2.children" :index="menu3.url" :key="menu3.id+''">
                  <span style="float:left;">{{menu3.name}}</span>
                </el-menu-item>
              </el-submenu>
            </div>
            <el-menu-item v-else :index="menu2.url">
              <span style="float:left;">{{menu2.name}}</span>
            </el-menu-item>

          </div>
        </el-submenu>
      </el-menu>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: "index",

    data() {
      return {
        menus: []
      }
    },

    created() {
      this.loadMenus();
    },

    methods: {

      loadMenus() {
        this.api.__api__getMenus()
          .then(data => {
            this.menus = data.data;
          })
          .catch(error => {
            console.log("加载菜单失败");
          })
      },

      handleOpen(){

      },

      handleClose(){

      }
    }


  }
</script>

<style >

  .el-menu-item:hover{
    outline: 0 !important;
    background-color: #409EFF !important;
  }
  .el-menu-item.is-active {
    color: #409EFF !important;

  }

  .el-submenu__title:focus, .el-submenu__title:hover{
    outline: 0 !important;
    background-color: #409EFF !important;
  }

</style>
